<template>
    <view class="container">
        <!-- Header -->
        <view class="header flex row-right" v-if="activity.length !== 0">
            <view
                class="choujiang-btn1 md"
                @click="goTo('/bundle/pages/luck_draw_code/luck_draw_code?id=')"
            >
                抽奖记录
            </view>
        </view>

        <!-- Section -->
        <view class="section m-t-16">
            <view class="box-wrap">
                <!-- 中奖名单公示 -->
                <view class="notice flex" v-if="activity.show_winning_list">
                    <image
                        class="m-l-18"
                        src="../../static/images/choujinag_notice.png"
                    ></image>
                    <view style="width: 90%">
                        <u-notice-bar
                            bg-color="none"
                            :volume-icon="false"
                            mode="horizontal"
                            :list="list"
                        >
                        </u-notice-bar>
                    </view>
                </view>

                <!-- 抽奖信息 -->
                <view
                    class="message flex row-between nr"
                    v-if="activity.length != 0"
                >
                    <view>我的积分: {{ activity.user_integral || "-" }}</view>
                    <template v-if="activity.show_winning_list">
                        <view
                            class="flex"
                            @click="
                                goTo(
                                    '/bundle/pages/win_prize_code/win_prize_code?id='
                                )
                            "
                        >
                            <image
                                class="m-r-10"
                                src="../../static/images/choujiang_name_list.png"
                            ></image>
                            中奖名单
                        </view>
                    </template>
                </view>

                <!-- 转盘 -->
                <view class="turntable" v-if="activity.length != 0">
                    <my-turntable
                        :ids="id"
                        @finish="finish"
                        :params="activity"
                    ></my-turntable>
                </view>

                <!-- 次数提示 -->
                <view class="num-tips nr" v-if="activity.length != 0">
                    {{ activity.limit || "-" }}
                </view>

                <!-- 活动规则 -->
                <view class="rule" v-if="activity.length != 0">
                    <view class="lg bold">活动规则</view>
                    <text class="sm" style="color: #fcd7d2"
                        >{{ activity.rule || "-" }}
                    </text>
                </view>

                <view
                    class="flex-1 flex row-center col-center"
                    v-if="activity.length == 0"
                    style="color: #fcd7d2; height: 61vh"
                >
                    活动已失效
                </view>
            </view>
        </view>

        <!-- Footer -->
        <view class="footer"> 本活动的所有奖品，均由商城提供 </view>

        <!-- Popup -->
        <u-popup v-model="showResult" mode="center">
            <view class="result-popup flex-col">
                <view class="result-container flex-col row-between">
                    <view
                        class="flex row-center"
                        style="padding: 0 118rpx; margin-top: 90rpx"
                    >
                        <text
                            style="
                                color: #f95f2f;
                                font-size: 62rpx;
                                text-align: center;
                            "
                            >{{ resultText }}</text
                        >
                    </view>
                    <view class="m-b-20 flex row-center">
                        <view
                            class="get-btn flex row-center md br60"
                            @click="showResult = false"
                        >
                            点击收下
                        </view>
                    </view>
                </view>
                <view style="margin-top: 50rpx" @click="showResult = false">
                    <u-icon name="close-circle" size="62" color="#fff"></u-icon>
                </view>
            </view>
        </u-popup>

        <!-- 页面状态 -->
        <page-status :status="pageStatus">
            <template #error>
                <u-empty
                    :text="pageErrorMsg"
                    src="/static/images/empty/order.png"
                    :icon-size="280"
                />
            </template>
        </page-status>
    </view>
</template>

<script>
import {
    apiLuckyDrawActivity,
    apiLuckyDrawWinningList,
} from "@/api/luck_draw.js";
import myTurntable from "@/bundle/components/my-turntable/my-turntable.vue";
export default {
    components: {
        myTurntable,
    },
    data() {
        return {
            id: "",
            // 中奖名单的轮播
            list: [],
            // 活动的信息
            activity: {},
            // 抽奖结果
            resultText: "",
            // 弹窗控制
            showResult: false,
            // 页面的状态
            pageStatus: "normal",
            pageErrorMsg: "",
        };
    },

    onLoad() {
        try {
            const id = this.$Route.query.id;
            this.id = id;
            console.log(id);
        } catch (e) {
            console.log(e);
            //TODO handle the exception
        }
    },

    onShow() {
        // 活动信息
        this.getLuckyDrawActivityFunc();
        // 中奖名单
        this.getLuckyDrawListFunc();
    },
    methods: {
        // 活动信息
        async getLuckyDrawActivityFunc() {
            apiLuckyDrawActivity({
                id: this.id,
            })
                .then((res) => {
                    this.activity = res;
                })
                .catch((err) => {
                    console.log(err);
                    this.pageErrorMsg =
                        err == "请求参数缺token" ? "请先登录" : err;
                    this.pageStatus = "error";
                });
        },

        // 中奖名单
        async getLuckyDrawListFunc() {
            const res = await apiLuckyDrawWinningList({
                id: this.id,
                page_no: 1,
                page_size: 10,
            });
            this.list = res.lists.map((item) => item.title);
        },

        // 确认收下
        finish(e) {
            this.showResult = true;
            this.resultText = e.detail;
        },

        goTo(url, id) {
            uni.navigateTo({
                url: url + this.id,
            });
        },
    },
};
</script>

<style lang="scss">
page {
    background-color: #ff2f46;
}

.container {
    width: 100%;
    padding-top: 300rpx;
    background: url()
        no-repeat;
    background-size: 100% auto !important;
    background-repeat: no-repeat;

    .header {
        .choujiang-btn1 {
            color: #7d350c;
            background-color: #fef0b5;
            border-radius: 40rpx 0 0 40rpx;
            box-shadow: 0px 3px 10px #f95f2f;
            padding: 18rpx 24rpx 20rpx 32rpx;
        }
    }

    .section {
        padding: 0 30rpx;

        .box-wrap {
            width: 690rpx;
            padding: 27rpx 28rpx;
            border-radius: 30rpx;
            background: #ed3720;
            border: 12rpx solid #fe6847;

            // 中奖名单公示
            .notice {
                margin: 0 24rpx;
                height: 58rpx;
                padding: 12rpx 0;
                border-radius: 29rpx;
                background: #d30c16;
                border: 2rpx solid #edb17d;

                image {
                    width: 32rpx;
                    height: 32rpx;
                }
            }

            // 中奖信息奖品等
            .message {
                margin: 30rpx 10rpx;
                color: #fef0b5;

                image {
                    width: 28rpx;
                    height: 30rpx;
                }
            }

            // 转盘
            .turntable {
                width: 610rpx;
                height: 610rpx;
                overflow: hidden;
                border-radius: 20rpx;
                padding: 35rpx 38rpx;
                background: url()
                    no-repeat;
                background-size: 100% auto !important;
            }

            // 每日抽奖次数提示
            .num-tips {
                color: #fbccc7;
                margin: 16rpx 0;
                text-align: center;
            }

            // 活动规则
            .rule {
                color: #fcd7d2;
                font-size: $-font-size-sm;
                padding: 30rpx 16rpx 30rpx 28rpx;
                border-radius: 20rpx;
                background: #d30c16;
            }
        }
    }

    // Footer
    .footer {
        color: #fff2d9;
        padding: 30rpx 0;
        text-align: center;
        font-size: $-font-size-xs;
    }

    // 弹窗
    .result-popup {
        text-align: center;
        width: 545rpx;
        height: 626rpx;

        .result-container {
            width: 545rpx;
            height: 514rpx;
            background-size: 100% 100%;
            background-image: url(../../static/images/luck_draw_bg.png);
        }

        image {
            border: 2rpx solid #fff;
            border-radius: 50%;
        }
    }

    // 按钮
    .get-btn {
        width: 320rpx;
        height: 70rpx;
        color: #7b3200;
        background: linear-gradient(180deg, #fef0b0 0%, #ffa92e 100%);
    }
}
</style>
